<!-- 为管理人员关联小区（便于接收消息） -->
<template>
	<div>
		<el-row :gutter="30">
			<!-- left -->
			<el-col :span="10">
				<el-space :size="10" :wrap="true">
					<template v-if="orgId == 100">
						<el-tree-select
							v-if="props.deptData[0]"
							v-model="data.queryParams.deptId"
							:data="props.deptData[0].children"
							:props="{
								label: 'deptName',
								value: 'deptId',
								children: 'children',
							}"
							:render-after-expand="false"
							:clearable="true"
							style="width: 150px"
							@change="fetchUser"
						/>
					</template>
					<el-input v-model="data.queryParams.keyWords" size="default" clearable placeholder="账号、姓名" style="width: 150px" />
					<el-input v-model="data.queryParams.mobile" size="default" clearable placeholder="电话" style="width: 150px" />
					<el-button type="primary" @click="searchUser" size="default"> 查询 </el-button>
				</el-space>

				<el-table :data="data.userData.list" :border="true" @row-click="userRowClick" highlight-current-row style="margin-top: 10px">
					<el-table-column label="#" type="index" width="50" :reserve-selection="true" />
					<el-table-column label="组织" prop="deptId" width="150">
						<template #default="{ row }">
							<span>{{ props.deptMap[row.deptId] }}</span>
						</template>
					</el-table-column>
					<el-table-column label="账号" prop="userName" />
					<el-table-column label="昵称" prop="userNickname" />
					<el-table-column label="电话" prop="mobile" />
					<el-table-column label="状态" prop="userStatus" width="80px">
						<template #default="{ row }">
							<el-tag v-if="row.userStatus" type="success" size="default">正常</el-tag>
							<el-tag v-else type="info" size="default">禁用</el-tag>
						</template>
					</el-table-column>
				</el-table>

				<pagination
					v-show="data.userData.total > 0"
					:total="data.userData.total"
					v-model:page="data.queryParams.pageNum"
					v-model:limit="data.queryParams.pageSize"
					:pager-count="5"
					layout="prev, pager, next"
					@pagination="fetchUser"
				/>
			</el-col>

			<!-- right -->
			<el-col :span="14">
				<el-row>
					<span style="line-height: 30px" v-if="data.curRow?.userNickname">【{{ data.curRow.userNickname }}】：管辖小区</span>
					<span style="line-height: 30px" v-else>请选择管理人员</span>
					<div class="flex1"></div>
					<el-button :disabled="!data.curRow || !data.curRow.mobile" :type="data.curRow ? 'success' : ''" @click="add" size="default">
						新增
					</el-button>
				</el-row>
				<el-table :data="data.communityList" border max-height="calc(100vh - 290px)" style="margin-top: 10px">
					<el-table-column label="#" type="index" :reserve-selection="true" />

					<el-table-column label="组织" prop="deptId" width="150">
						<template #default="{ row }">
							<span>{{ props.deptMap[row.deptId] }}</span>
						</template>
					</el-table-column>
					<el-table-column label="小区" prop="name" />
					<el-table-column label="地址" prop="address" />
					<el-table-column label="状态" width="85">
						<template #default="{ row }">
							<el-tag type="success" v-if="row.manageStatus == 1">启用</el-tag>
							<el-tag type="info" v-else>禁用</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" column-key="operation" fixed="right" width="145">
						<template #default="{ row }">
							<el-button @click="singleDelete(row)" type="danger" bg size="small"> 解除 </el-button>

							<el-button v-if="row.manageStatus == 2" @click="changeManageStatus(row, 1)" type="success" bg size="small"> 启用 </el-button>
							<el-button v-if="row.manageStatus == 1" @click="changeManageStatus(row, 2)" type="warning" bg size="small"> 禁用 </el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>

		<!-- 分页 -->
		<!-- <pagination :limit.sync="data.queryParams.size" :page.sync="data.queryParams.page"
      :total="Number(data.tableData.total)" @pagination="fetch" /> -->

		<!--  编辑  -->
		<!-- 			:ids="data.communityList.map((item:any)=>item.communityId)" -->
		<Edit
			ref="edit"
			v-if="data.dialog.isVisible"
			:dialog-visible="data.dialog.isVisible"
			:type="data.dialog.type"
			:user-id="data.curRow?.id"
			:ids="data.userCommunityIds"
			:deptData="props.deptData"
			:deptMap="props.deptMap"
			@close="editClose"
			@success="editSuccess"
		/>
	</div>
</template>

<script lang="ts" setup name="alarm-nolandle">
import Edit from './Edit.vue';
import { reactive, onMounted, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
import alarmManageApi from '/@/api/smoke/alarmManage';
import { getUserList } from '/@/api/system/user/index';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);

const orgId = ref(userInfos.value.deptId);
const data = reactive({
	userData: {
		list: <any>[],
		total: 0,
	},
	communityOptions: <any>[],
	communityList: <any>[],
	userCommunityIds: [],
	communityLoading: false,

	//编辑弹窗
	dialog: {
		isVisible: false,
		type: 'add',
	},

	queryParams: {
		pageNum: 1,
		pageSize: 10,
		deptId: '',
		keyWords: '',
		mobile: '',
	},

	selection: [],
	curRow: <any>{},
});

// props
const props = defineProps({
	curTab: {
		type: String,
		default: '',
	},
	deptData: {
		type: <any>Array,
		default: () => {
			return [];
		},
	},
	deptMap: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
//
onMounted(() => {
	fetchUser(null);
});

// 此操作是为了更新在second 下的操作，再tab切换回来不会自动刷新问题，概率不大，
watch(
	() => props.curTab,
	(newValue: any) => {
		if (newValue == 'first') {
			if (data.curRow) {
				getCommuityList();
			}
		}
	}
);

function onOrgSelect(data: any) {
	orgId.value = data.dept.id;
	fetchUser(null);
}

// 获取userList
function fetchUser(params: any) {
	if (params) {
		data.queryParams.pageNum = params.page;
	}
	data.curRow = null;
	data.communityList = [];

	if (orgId.value != 100) {
		data.queryParams.deptId = orgId.value + '';
	}
	getUserList(data.queryParams).then((res: any) => {
		const { userList: list, total } = res.data;
		data.userData = { list, total };
	});
}

function searchUser() {
	data.queryParams.pageNum = 1;
	fetchUser(null);
}

// 用户行点击
function userRowClick(row: any) {
	data.userCommunityIds = [];
	data.curRow = row;
	getCommuityList();
}

function getCommuityList() {
	let searchData = {
		userId: data.curRow.id,
	};
	alarmManageApi.alarmUserList(searchData).then((res: any) => {
		data.communityList = res.data.list || [];
		data.userCommunityIds = data.communityList.map((item: any) => item.communityId);
	});
}

// 新增
function add() {
	data.dialog.isVisible = true;
	data.dialog.type = 'add';
}

//编辑弹窗关闭
function editClose() {
	data.dialog.isVisible = false;
}

function editSuccess() {
	editClose();
	getCommuityList();
}

// 解除当前用户与本小区的绑定
function singleDelete(row: any) {
	let params = { id: row.id };
	ElMessageBox.confirm('是否解除当前用户与本小区的绑定?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			alarmManageApi.alarmUserDelete(params).then((res: any) => {
				ElMessage.success('操作成功');
				getCommuityList();
			});
		})
		.catch(() => {
			ElMessage.info('已取消操作');
		});
}

function changeManageStatus(row: any, manageStatus: number) {
	let updateData = {
		id: row.id,
		manageStatus,
	};

	alarmManageApi.alarmUserUpdate(updateData).then((res: any) => {
		getCommuityList();
	});
}
</script>
